﻿<!DOCTYPE html>
<html lang="en" class="bg-white" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户管理</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{../../assets/libs/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{../../assets/module/admin.css?v=311}"/>
    <link rel="stylesheet" href="../../assets/module/formSelects/formSelects-v4.css"/>
</head>
<body>

<!-- 页面加载loading -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <table class="layui-table" id="authTable" lay-filter="authTable"></table>
        </div>
    </div>
</div>
<!-- 表单弹窗 -->
<script type="text/html" id="modelUser">
    <form id="modelUserForm" lay-filter="modelUserForm" class="layui-form model-form layui-form-pane" >
        <input name="userId" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">权限名称</label>
            <div class="layui-input-block">
                <select name="roleId" lay-verify="required">
                      <option value="">请选择</option>
                       <option value="1">客户查询</option>
                       <option value="2">区域查询</option>
                       <option value="3">合同查询</option>
                       <option value="4">合同添加</option>
                       <option value="5">加盟分布</option>
                       <option value="6">金额汇总</option>
                       <option value="7">用户管理</option>
                       <option value="8">角色管理</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="modelUserSubmit" lay-submit>保存</button>
        </div>
    </form>
</script>

<!-- js部分 -->
<script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../assets/js/common.js?v=311"></script>
<script>
    layui.use(['layer', 'form', 'table', 'util', 'admin', 'formSelects','treetable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var formSelects = layui.formSelects;
        var treetable = layui.treetable;

        $.ajax({
            url : "/sys/permission/getAllresources",
            type : "POST",
            dataType : 'JSON',
            success : function(res) {
                localStorage.removeItem("role")
                localStorage.setItem("role",res);
            }
        });


        function getPermission(id){
           var str=localStorage.getItem("role");
           var arr=str.split(",");
           if (id==0){
               return "*";
           } else {
               id=id-1;
               return arr[id];
           }

        }
        // 渲染表格
        function renderTable() {
            var arr=[
                {type: 'numbers'},
                {field: 'id',align: 'center', title: '序号'},
                {align: 'center', title: '角色名称', templet: function(item){
                        var str='<span class="layui-badge layui-bg-gray">'+item.title+'</span>'
                        return str;
                    }},
                {
                    title: '拥有权限',
                    align: 'center',
                    templet: function(item){
                        var str='<span class="layui-badge-rim">'+getPermission(item.permission_id)+'</span>'
                        return str;
                    }
                },
                {title: '权限操作', align: 'center', minWidth: 120,
                    templet: function(item){
                        if (item.pid==0){
                            return '<a class="layui-btn layui-btn-sm layui-btn-warm roleAdd">添加</a>';
                        }else {
                            return '<a class="layui-btn layui-btn-sm layui-btn-danger roleDelete">删除</a>';
                        }
                    }
                }
            ];
            treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'id',
                treePidName: 'pid',
                elem: '#authTable',
                url: '/sys/role/getRolePermission',
                cellMinWidth: 100,
                cols: [arr]
            });
        }
        renderTable();
        // 添加showEditModel();
        $(document).on('click','.roleAdd',function () {
            var pid=$(this).parent().parent().parent().find("td[data-field='id']").attr('data-content');
             localStorage.setItem("pid",pid);
            layer.open({
                type: 1,
                title:"添加用户~",
                skin: 'layui-layer-rim', //加上边框
                area: ['420px', '300px'], //宽高
                content:$("#modelUser").html()
            });
            form.render();
        })
        $(document).on('click','.roleDelete',function () {
            var pid=$(this).parent().parent().parent().find("td[data-field='id']").attr('data-content');
            layer.confirm('确认删除该权限吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                layer.msg('绑定中...', {icon: 1});
                deletePermission(parseInt(pid))
            }, function(){
                layer.msg('已取消', {icon: 1});
            });
        })
        function deletePermission(index){
            $.ajax({
                url : "/sys/permission/deleteRolePermission",
                type : "POST",
                dataType : 'JSON',
                data : {id:index},
                success : function(res) {
                    if (res.code==0){
                        layer.msg("删除成功！",{icon:1});
                        setTimeout(function () {
                            renderTable();
                        },1500)
                    }
                }
            })
        }
        // 搜索
        $('#btnSearch').click(function () {
            var key = $('#sltKey').val();
            var value = $('#edtSearch').val();
            if (value && !key) {
                layer.msg('请选择搜索条件', {icon: 2});
            }
            insTb.reload({where: {searchKey: key, searchValue: value}});
        });


      form.on('submit(modelUserSubmit)', function (data) {
         addPermission(parseInt(data.field.roleId));
         return false;
       });
        function addPermission(role) {
            $.ajax({
                url : "/sys/permission/addPermission",
                type : "POST",
                data:{
                    pid:parseInt(localStorage.getItem("pid")),
                    role_id:parseInt(localStorage.getItem("pid")),
                    permission_id:role
                },
                dataType : 'JSON',
                success : function(res) {
                   if (res.code==0){
                       layer.msg("添加权限成功！",{icon:1})
                       setTimeout(function () {
                         layer.closeAll();
                           renderTable();
                       },1500)

                   }
                }
            });
        }
    });
</script>
</body>
</html>